<template>
  <div class="category">
    <div class="categoryleft">
      <mt-navbar class="page-part" v-model="selected" >
        <mt-tab-item :id="item.id" v-for="item in cateFirstList" :key="item.id">
            {{item.categoryName}}
        </mt-tab-item>
      </mt-navbar>
    </div>
    <div class="categoryright">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item :id="item.id" v-for="item in cateFirstList" :key="item.id">
          <router-link to='' class='proitem' v-for="item2 in cateSecondList" :key="item2.id">
              <img :src="'http://127.0.0.1:3000'+item2.brandLogo" alt="">
              <h5>{{item2.brandName}}</h5>
          </router-link>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>
<script>
import {categoryFirst, categorySecond} from '@/api'
export default {
  data () {
    return {
      selected: '',
      cateFirstList: '',
      cateSecondList: ''
    }
  },
  watch: {
    selected (newdata, olddata) {
      // console.log(row1, row2)
      categorySecond({id: newdata})
        .then(res => {
          // console.log(res)
          this.cateSecondList = res.rows
        })
    }
  },
  mounted () {
    this.$store.state.title = '分类'
    categoryFirst()
      .then(res => {
        this.cateFirstList = res.rows
        this.selected = res.rows[0].id
      })
  }
}
</script>
<style lang="scss" scoped>
.category {
  display: flex;
  height: 100%;
  .categoryleft {
    width: 100px;
    border-right: 1px solid #ccc;
  }
  .categoryright {
    flex: 1;
    padding: 10px;
    .proitem{
        width:33.33%;
        float: left;
        text-align: center;
        img{
            width: 100%;
            display: block;
        }
    }
  }
  .mint-navbar{
      flex-direction: column;
  }
}
</style>
